<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取款服务</title>
    <style>
        body {
            margin: 0;
            font-family: "Microsoft YaHei", "微软雅黑";
            background-color: #f4f6f9;
            color: #333;
        }

        .top-nav {
            width: 95%;
            height: 80px;
            background-color: #1E90FF;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: white;
            padding: 0 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .top-nav .logo {
            font-size: 25px;
            font-weight: bold;
            letter-spacing: 1px;
            margin-left: 20px;
        }

        .top-nav .user a {
            color: white;
            text-decoration: none;
            margin-left: 15px;
        }

        .container {
            display: flex;
            height: calc(100vh - 60px);
        }

        .sidebar {
            width: 200px;
            background-color: #2F4F9D;
            color: white;
            display: flex;
            flex-direction: column;
            padding-top: 30px;
        }

        .sidebar a {
            padding: 15px 20px;
            text-decoration: none;
            color: white;
            text-align: center;
        }

        .sidebar a:hover,
        .sidebar a.active {
            background-color: #4169E1;
            border-left: 5px solid #FFD700;
        }

        .main-content {
            flex: 1;
            padding: 20px 40px;
        }

        .main-content h1 {
            color: #1E90FF;
            font-size: 26px;
            margin-bottom: 20px;
        }

        .withdraw-form {
            background-color: white;
            border-radius: 10px;
            padding: 40px;
            width: 600px;
            margin: 0 auto;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: inline-block;
            width: 120px;
            font-size: 16px;
            font-weight: bold;
            margin-right: 20px;
            text-align: right;
        }

        .form-group input,
        .form-group select {
            width: 300px;
            height: 40px;
            padding: 0 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .form-group input:focus {
            outline: none;
            border-color: #1E90FF;
            box-shadow: 0 0 5px rgba(30, 144, 255, 0.3);
        }

        .submit-btn {
            text-align: center;
            margin-top: 40px;
        }

        .submit-btn input {
            background-color: #1E90FF;
            color: white;
            border: none;
            width: 150px;
            height: 45px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
        }

        .submit-btn input:hover {
            background-color: #0066CC;
        }

        .balance-info {
            background-color: #f0f8ff;
            padding: 15px 20px;
            border-radius: 5px;
            margin-bottom: 20px;
            text-align: center;
        }

        .balance-info p {
            margin: 8px 0;
            font-size: 16px;
        }

        .balance-amount {
            color: #1E90FF;
            font-size: 22px;
            font-weight: bold;
        }

        .card-info {
            text-align: center;
            margin-bottom: 25px;
            font-size: 17px;
            color: #333;
        }

        .card-info span {
            font-weight: bold;
            color: #1E90FF;
            font-size: 20px;
            letter-spacing: 2px;
        }
    </style>
</head>

<body>
    <div class="top-nav">
        <div class="logo">智慧银行系统</div>
        <div class="user" id="user-info">
            <a href="login.html">登录&nbsp;&nbsp;</a> |
            <a href="register.html">注册</a>
        </div>
    </div>

    <div class="container">
        <div class="sidebar">
            <a href="index.html">首页</a>
            <a href="deposit.html">存款服务</a>
            <a href="withdraw.html" class="active">取款服务</a>
            <a href="transactions.html">账户流水</a>
            <a href="user.html">个人中心</a>
        </div>

        <div class="main-content">
            <h1>取款服务</h1>

            <div class="withdraw-form">
                <div class="card-info">
                    您当前的银行卡号为：<span id="card-display"></span>
                </div>

                <div class="balance-info">
                    <p>账户总余额：<span class="balance-amount">¥ <span id="total-balance">10000.00</span></span></p>
                    <p>可取余额（活期）：<span class="balance-amount" style="color:green;">¥ <span
                                id="available-balance">6000.00</span></span></p>
                    <p>定期存款余额：<span class="balance-amount" style="color:gray;">¥ <span
                                id="fixed-balance">4000.00</span></span></p>
                </div>

                <form id="withdraw-form" onsubmit="return handleWithdraw(event)">
                    <div class="form-group">
                        <label for="withdraw-amount"><span style="color:red">*</span>取款金额</label>
                        <input type="number" id="withdraw-amount" placeholder="请输入取款金额" min="0.01" step="0.01" required>
                    </div>

                    <div class="form-group">
                        <label for="transaction-pwd"><span style="color:red">*</span>交易密码</label>
                        <input type="password" id="transaction-pwd" placeholder="请输入交易密码" required>
                    </div>

                    <div class="submit-btn">
                        <input type="submit" value="确认取款">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        const isLoggedIn = true; // 模拟登录状态
        const username = "张三";
        const gender = "先生";


        // 设置用户信息
        const userInfo = document.getElementById("user-info");
        if (isLoggedIn) {
            userInfo.innerHTML = `亲爱的 ${username}${gender}`;
            // 设置模拟余额
            document.getElementById("current-balance").textContent = "10000.00";
        } else {
            // 非登录状态下，提示用户登录
            document.getElementById("current-balance").textContent = "请先登录";
        }

        // 生成吉林银行卡号（以622865开头，共19位）
        function generateBankCard() {
            const prefix = "622865";
            let middle = "";
            for (let i = 0; i < 13; i++) {
                middle += Math.floor(Math.random() * 10);
            }
            return prefix + middle;
        }

        // 隐藏银行卡号中间部分，仅保留前6位和后6位
        function maskCardNumber(cardNumber) {
            return cardNumber.slice(0, 6) + "******" + cardNumber.slice(-6);
        }

        const cardNumber = generateBankCard();
        document.getElementById("card-display").textContent = maskCardNumber(cardNumber);

        function handleWithdraw(event) {
            event.preventDefault();

            if (!isLoggedIn) {
                alert("请先登录后再进行取款操作");
                window.location.href = "login.html";
                return false;
            }

            const withdrawAmount = parseFloat(document.getElementById("withdraw-amount").value);
            const availableBalance = parseFloat(document.getElementById("available-balance").textContent);
            const pwd = document.getElementById("transaction-pwd").value;

            if (isNaN(withdrawAmount) || withdrawAmount <= 0) {
                alert("请输入有效的取款金额");
                return false;
            }

            if (withdrawAmount > availableBalance) {
                alert("取款金额超过可取余额！");
                return false;
            }

            if (pwd.length !== 6 || !/^\d+$/.test(pwd)) {
                alert("交易密码必须为6位数字");
                return false;
            }

            alert(`取款成功！\n银行卡号：${maskCardNumber(cardNumber)}\n取款金额：¥${withdrawAmount.toFixed(2)}`);
            const newAvailable = availableBalance - withdrawAmount;
            const totalBalance = parseFloat(document.getElementById("total-balance").textContent) - withdrawAmount;
            document.getElementById("available-balance").textContent = newAvailable.toFixed(2);
            document.getElementById("total-balance").textContent = totalBalance.toFixed(2);
            document.getElementById("withdraw-form").reset();
            return false;
        }
    </script>
</body>

</html>